<template>
  <div id="chat">
    <div class="chatBox">
      <div class="chatBox-top">
        <div class="chatBox-top-imgBox">
          <img
            style="width: 2.5rem; height: 2.5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="chatBox-top-text"><span>小巴客服正在为您服务</span></div>
      </div>
      <div class="chatBox-middle">
        <div class="chatInfo" id="chatInfo">
          <div
            class="chatUser-box"
            v-for="(item, index) in infoList"
            :key="index"
            :class="[current == item.id ? 'chatUser-box1' : 'chatUser-box']"
          >
            <div class="chatUser-box-img">
              <img
                style="width: 2.5rem; height: 2.5rem"
                :src="item.images"
              />
            </div>
            <div class="chatUser-info">
              <div
                class="chatUser-info-name"
                :class="[
                  current == item.id
                    ? 'chatUser-info-name1'
                    : 'chatUser-info-name',
                ]"
              >
                <span>{{ item.name }}</span
                ><span class="nowDate">{{ item.time }}</span>
              </div>
              <div
                class="chatUser-info-text"
                :class="[
                  current == item.id
                    ? 'chatUser-info-text1'
                    : 'chatUser-info-text',
                ]"
              >
                <span>{{ item.message }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chatBox-infoDesk">
        <div class="chatBox-textarea">
          <el-input
            v-model="messages"
            type="textarea"
            rows="4"
            placeholder="请输入咨询信息"
          />
        </div>
        <div class="chatBox-sendOut">
          <!-- <el-button class="sendOut" type="primary" v-model="messages" @click="getSends"
            >客户</el-button
          > -->
          <el-button class="sendOut" type="primary" v-model="messages" @click="getSend"

            >用户</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      aa:"",
      messages: "",
      nowDate: "", // 当前日期
      current: 2,
      infoList: [
          {
        id: 1,
        name: "小巴",
        time: "2021-4-23 17:59:50 星期五",
        images: "https://img01.yzcdn.cn/vant/cat.jpeg",
        message: "您好！",
      },
      {
        id: 3,
        name: "商客",
        time: "2021-4-23 18:00:24 星期五",
        images: "https://img01.yzcdn.cn/vant/cat.jpeg",
        message: "请问又是什么需要帮助的吗？",
      },
      {
        id: 2,
        name: "发哥",
        time: "2021-4-23 18:00:05 星期五",
        images: "https://img01.yzcdn.cn/vant/leaf.jpg",
        message: "咨询信息",
      },
      ],
    };
  },
  mounted() {
    this.formatDate();
    this.scrollToBottom();
  },
  updated() {
    this.scrollToBottom();
  },

 
  methods: {
    getSend() {
      if (this.messages == "") {
        alert("请输入咨询信息");
        return;
      }
      let userData = {
        id: 2,
        name: "发哥",
        time: this.nowDate,
        images: "https://img01.yzcdn.cn/vant/leaf.jpg",
        message: this.messages,
      };
      this.messages = "";
      this.infoList.push(userData)
      axios({
      url: "api/http/aiReply",
      params:{
          msg:this.messages
      },
      mounted: "GET",
      async:false,
        }).then( (res)  => {
       this.messages = res.data
       if (this.messages == "") {
        alert("请输入咨询信息")
        return;
      }
    // alert(this.messages)
    
      var customerData = {
        id: 4,
        name: "小巴",
        time: this.nowDate,
        images: "https://img01.yzcdn.cn/vant/cat.jpeg",
        message: this.messages,
      }
      this.infoList.push(customerData);
      this.messages = "";
      // this.getSends()
      console.log("-----------------------------------------")
      console.log(res);
    }).catch((e) => {});
    //   this.getSend(messages);
      this.$options.methods.getfind(this.messages);
      this.messages = "";
    },
    // getSends() {
      
      
      
    // },
    scrollToBottom() {
      this.$nextTick(() => {
        let container = this.$el.querySelector("#chatInfo");
        container.scrollTop = container.scrollHeight;
      });
    },
    formatDate() {
      //当前时间 2021-4-23 18:00:24 星期五
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    },
  },
};
</script>

<style>
#chat .chatBox {
  width: 60rem;
  height: auto;
  margin: 2.5rem auto 0;
  background-color: #fff;
  overflow: hidden;
  border-radius: 0.625rem;
}

#chat .chatBox-top {
  width: 100%;
  height: 3.75rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #2b3d63;
}

#chat .chatBox-top-imgBox {
  margin-left: 1.25rem;
}

#chat .chatBox-top-text {
  margin-left: 1.25rem;
  font-size: 1rem;
  color: #fff;
}

#chat .chatBox-middle {
  width: 100%;
  height: 31.25rem;
  background-color: #fff;
  border-bottom: 0.0625rem solid #2b3d63;
}

#chat .chatBox-middle {
  width: 100%;
  height: 31.25rem;
  background-color: #fff;
}

#chat .chatBox-infoDesk {
  width: 100%;
  height: 10rem;
}

#chat .chatBox-textarea {
  width: 100%;
  height: 6.25rem;
}

#chat .chatBox-sendOut {
  margin-top: 0.625rem;
  width: 100%;
  height: 3.125rem;
  text-align: right;
}

#chat .sendOut {
  padding: 0 1.25rem;
  height: 2.1875rem;
  margin: 0.3125rem 1.25rem 0 0;
}

#chat .chatInfo {
  width: 94%;
  height: 94%;
  margin: 1.25rem auto;
  overflow: auto;
}

#chat .chatUser-box {
  width: 100%;
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
}

#chat .chatUser-box-img {
  display: flex;
}

#chat .chatUser-info {
  margin: 0 1.25rem;
}

#chat .chatUser-info-name {
  font-size: 0.875rem;
  color: #888;
  display: flex;
  flex-direction: row;
}

#chat .nowDate {
  margin: 0 0.625rem;
}

#chat .chatUser-info-text {
  margin-top: 0.3125rem;
  max-width: 20rem;
  padding: 0.5rem;
  background-color: #e8e8e8;
  border-radius: 0.5rem;
  float: left;
  table-layout: fixed;
  word-break: break-all;
  overflow: hidden;
}

#chat .chatUser-info-text span {
  font-size: 0.9375rem;
  line-height: 1.5625rem;
}
#chat .chatUser-box1 {
  flex-direction: row-reverse;
}
#chat .chatUser-info-name1 {
  flex-direction: row-reverse;
}
#chat .chatUser-info-text1 {
  float: right;
}
</style>
